<template>
  <div class="mt-3 mb-3">
    <ul class="article-summary-list">
      <li v-for="(article, index) in articleList" :key="index" class="article-summary-item">
        <router-link class="article-summary-item-title" :to="{name: 'InvestArticleDetail', params: {id: article.id}}">
          {{article.title}}
        </router-link>
        <div class="article-summary-item-tip">
          <v-icon class="article-summary-item-tip-icon">mdi-clock-outline</v-icon>
          <span class="article-summary-item-tip-text">{{article.created_at}}</span>
        </div>
      </li>
    </ul>
    <v-pagination
      v-if="paginationLength"
      v-model="page"
      class="mt-3 mb-3"
      :length="paginationLength"
      :total-visible="7"
      @input="handlePageChange"
    ></v-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class InvestCategory extends Vue {
  protected categoryId: number = 0;
  protected page: number = 1;
  protected pageSize: number = 10;
  protected paginationLength: number = 0;
  protected articleList: TypeFrontArticle.ArticleSummaryItem[] = [];
  @Watch('$route.params.id', {immediate: true})
  protected onIdChange(val: string): void {
    this.categoryId = Number(val);
    this.getArticleList();
  }
  protected handlePageChange(val: number): void {
    this.page = val;
    this.getArticleList();
  }
  protected async getArticleList(): Promise<void> {
    const params: TypeFrontArticle.ArticleListParams = {
      category_id: this.categoryId,
      page: this.page,
      page_size: this.pageSize,
    };
    const {data: {list, total}} = await this.$api.front.articleList<
      TypeBase.PaginationResult<TypeFrontArticle.ArticleSummaryItem[]>
    >(params);
    this.articleList = list;
    this.paginationLength = Math.ceil(total / this.pageSize);
  }
}
</script>

<style lang="scss" scoped>
  .article-summary-list {
    padding: 0;
  }
  .article-summary-item {
    padding: $padding;
    position: relative;
    &-title {
      display: block;
      width: 60%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: $fontColor;
      &:hover {
        color: $primary;
      }
    }
    &-tip {
      position: absolute;
      top: $padding;
      bottom: $padding;
      right: $padding;
      display: flex;
      vertical-align: middle;
      &-icon {
        margin-right: .3em;
        font-size: 18px;
      }
      &-text {
        white-space: nowrap;
      }
    }
  }
  // 大屏幕
  @media (min-width: 960px) {
    
  }
  // 中等屏幕
  @media (min-width: 600px) and (max-width: 960px) {
    
  }
  // 小屏幕
  @media (max-width: 600px) {
    .article-summary-item-title {
      width: 100%;
    }
    .article-summary-item-tip {
      display: none;
    }
    .article-summary-item-title {
      margin-right: 0;
    }
  }
</style>
